「クラスメソッドのReact事情大公開スペシャル#4」を開催しました!

「クラスメソッドのReact事情大公開スペシャル#4」を開催しました!

Clock Icon2024.09.09

みなさんこんにちは、リテールアプリ共創部マッハチームのmorimorikochanです

9月6日にクラスメソッドのReact事情大公開スペシャル#4を大阪オフィスで開催いたしました。
ので、前回に引き続き開催レポートを残したいと思います。

イベント概要

イベント名 クラスメソッドのReact事情大公開スペシャル#3
日時 2024/09/06 19:00〜
場所 クラスメソッド シン大阪オフィス
当日参加者 36名

https://classmethod.connpass.com/event/325518/

4回目となる今回は、6名の方にご登壇いただき合計39名の方にご参加いただきました👏
前回と比べて登壇を希望される方が多く集まったので、登壇パートの時間は1時間半ほどにボリュームアップしました💪

開催の様子

登壇内容

登壇内容を紹介していきます。

1. React + TextAliveでカッコいいLyric Applicationを作ろう!!

はじめに、エムオーテックス株式会社の"とすり"さんに発表いただきました。

"突然MVを作って欲しい!!!"っていうシチュエーション、皆さんありますよね(ない)
TextAliveを使ってwebアプリケーションでMVを作る方法について解説いただきました。

実際に動作しているサイトにアクセスして見ましたが、ビートが全くずれてなく、歌詞の表示タイミングもぴったりでとてもクオリティの高いMVになっていました

https://react-textalive-lyricapp-sample.vercel.app/

2. App Router を実プロダクトで採用して見えてきた勘所をちょっとだけ紹介

クラスメソッド株式会社の"maroKanatani"さんに発表いただきました。
maroKanataniさんは2度目の発表でしたが、10分の時間で濃い内容だったと思います

AppRouter採用時には、UIコンポーネントライブラリとの相性には気をつけないとクライアントコンポーネントだらけになってしまうとのことでした。
こういうところもTailwindが流行ってる要因になっているんでしょうか

3. Suspenseを克服する

株式会社Gemcookの"ぞのりょー"さんに発表いただきました。

(資料は現在のところアップロードされていません)

ReactのSuspenseについて、挙動の説明から、バージョン18, 19の間の挙動の違いについて(Twitter(X)で話題になっていた件)も広く解説されており、とてもわかりやすかったです。
この問題が解決してからReact19のリリースになるとのことなので、どういう結末になるのか気になりますね

https://github.com/facebook/react/pull/26380#issuecomment-2166178673

4. ReactCompilerを試してわかったいくつかのこと。

株式会社Gemcookの"岡山 叶太"さんに発表いただきました。
React Compilerの説明から、実際に検証して分かったことを具体的に発表いただきました。

新規プロジェクトならまだしも、既存プロジェクトでReact Compilerをがっつり採用するのはまだ難しいのかも...と私は感じました。

https://www.figma.com/slides/Cti5VFTkPB3ZI18poIxPf4/ReactCompilerを試して-わかったいくつかのこと。?node-id=68-655&t=Su3rOKQcQYmRNFLy-1

あと、株式会社Gemcookのお二方のスライドがめちゃくちゃ綺麗でした💫
「Figma Slideを使えば綺麗になりますよ」とのことでしたが絶対そんなことない気がする🤨

5. useSWRをuseContextの代わりに使ってみる試み

"Kanon"さんに発表いただきました。
#3に引き続き二度目の登壇です。
前回#3の勉強会での弊社の西田さんの発表内容での疑問をもとに、検証した内容を発表いただきました。

他人の発表で疑問に感じたことを再現して理解するプロセスがとても尊敬できるなーと感じていました。

(今回の勉強会用にスライドは公開されていませんが、おそらく同じ内容のスライドがありましたので掲載しておきます)

6. Reactに秩序が欲しい - XState -

"gizm000"さんに発表いただきました。
React以前の従来の秩序からフロントエンドの本質を分解し、インタラクティブな操作に秩序を与える ことができるXStateという状態管理(ステートマシン?)ツールについて発表いただきました。

大規模なプロジェクトやFE側が肥大化しているプロジェクトでは欲しくなることが多いのだろうと感じます。
ReactだけでなくVueやVanillaJSでも導入が可能のようです。

懇親会

今回も登壇後に懇親会を開催しました。あまり時間は長くありませんでしたが、皆さん近くにいる人と交流されており盛り上がっていました
実は今回もクロージングトークの中でLTの募集をさせていただいたのですが、ありがたいことに何人かの方から相談を受けました。自社のメンバーだけではこれだけ何度もイベントを開催することは到底できないので、毎回お話いただける方がいらっしゃって本当にありがとうございます🙇‍♂️

ちなみに前回もですが福井から参加された方がいらっしゃいました。翌日福井に帰るとのことだったので、是非とも大阪を堪能してから福井に帰って欲しいです

ハッシュタグ

今回ハッシュタグを新たに #cm_react としましたが、ツイートが盛り上がってて面白かったです。
野球の実況中継みたいで面白いですね。発表者用のディスプレイに流せるとめちゃくちゃ面白そうだな〜と感じてます。誰か作って🥺

いくつか面白かったツイート貼っておきます

https://twitter.com/shzawa/status/1832005932454482405

https://x.com/watt__007/status/1832070877137301573

https://x.com/ysknsid25/status/1832012719022821676

https://x.com/ShiraishiTk/status/1832009682787119433

所感

おかげさまで#4が無事に開催できました👏
運営をお手伝いいただいた皆様、登壇を承諾していただいた皆様ありがとうございました。

この勢いのまま次回も早めに計画したいと思ってます🚀

この記事をシェアする

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.